<template>
  <div>
    <div v-if="modDetail" class="mod-detail">
      <div class="mod-isisis" ref="modIs">
      <div class="hander-s">
      <div class="in-t">
      <div class="in-ts" v-if="qualificationEdit"></div>
      <h3 class="zhengshuxiangqing"><span>证书详情 - 资质证书</span></h3>
      </div>
      <div class="anniu">
      <el-button type="text" style="color:#6E92E9;" @click="toggleEdit">修改</el-button>
      <i>|</i>
      <el-button class="button-xg" type="text" style="color:#6E92E9;" @click="gotoRouteHandle">返回上级</el-button>
      </div>
    </div>
        <!-- 基础信息 -->
    <div class="form-div">
     <el-form :model="dataForm" :label-position="labelPosition" ref="dataForm" class="queryFormList">
       <el-row>
         <el-col :span="8">
         <el-form-item label="证书名称：">
         {{dataForm.name}}
         </el-form-item>
         </el-col>
         <el-col :span="8">
          <el-form-item label="证书编号：">
         {{dataForm.code}}
         </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="发证机构：">
         {{dataForm.releaseOrgan}}
         </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="发证日期：">
         {{dataForm.releaseDate}}
         </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="到期日期：">
              <span v-if="dataForm.longTerm == 1">长期有效</span>
              <span v-else>{{dataForm.expireDate}}</span>
            </el-form-item>
         </el-col>
        <el-col :span="8">
           <el-form-item label="法人姓名：">
              {{dataForm.corporateName}}
            </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="注册地区：">
              {{dataForm.registeredAddress}}
            </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="注册资本：">
              {{dataForm.registeredCapital}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="资质项：">
              {{dataForm.qualificationDetails}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="备注：">
              {{dataForm.remark}}
            </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="8">
           <el-form-item label="证书图片：">
            <ele-image v-if="this.dataForm.certiPic !== null" :urls="certiPicList"></ele-image>
            </el-form-item>
         </el-col>
       </el-row>
     </el-form>
    </div>
    <!-- 资质匹配 -->
  <div class="zizhi">
    <div class="yanqijilu">
      <div class="in-ts"></div>
      <h3>资质匹配</h3>
      <el-tooltip class="item" effect="dark" content="资质匹配仅能匹配相应种类的证书，具体证书信息请留意右侧备注信息！" placement="top-start">
            <i class="el-icon-warning-outline outline-a"></i>
    </el-tooltip>
      </div>
  </div>
<!-- 用于做v-if 的大div -->
  <div class="div-forDiv">
    <!-- 循环div -->
    <div class="div-xh">
      <!-- 上面 --点击折叠 的  头部 -->
<el-collapse v-model="activeNames">
  <el-collapse-item v-for="(item,i) in cellList" :key="i" :title="item.qualiCode" :name="i">
    
      <el-table
      :data="item.condMatchResultList"
      style="width: 100%"
      :header-cell-style="{background:'#F5F7FA',color:'#000000'}"
      >
      <el-table-column
        type="index"
        label="序列"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="needCertDetail"
        label="所需证书"
        min-width="180"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="handleCertDetail"
        label="已有证书"
        min-width="180"
        align="center">
        <template slot-scope="scope">
          <span style="color:#6E92E9" v-if="scope.row.resultTag">{{scope.row.handleCertDetail}}</span>
          <span style="color:#E96E6E" v-if="!scope.row.resultTag">{{scope.row.handleCertDetail}}</span>
        </template>
      </el-table-column>
        <el-table-column
        prop="certStatus"
        label="当前证书状态"
        min-width="180"
        show-overflow-tooltip
        align="center">
      </el-table-column>
        <el-table-column
        prop="explains"
        label="备注"
        min-width="180"
        show-overflow-tooltip
        align="center">
      </el-table-column>
    </el-table>

  </el-collapse-item>
</el-collapse>
    </div>

  </div>
  

    <div class="zizhi">
    <div class="yanqijilu">
      <div class="in-ts"></div>
      <h3>延期记录</h3></div>
    <div class="yanqianniu">
      <el-button class="button-a" size="mini" type="primary" @click="itemDetails()">延 期</el-button>
    </div>
    </div>
    <!-- 延期记录 -->
    <div>
   <el-table
    :data="secondData"
    :header-cell-style="{background:'#F5F7FA'}"
    style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
    <el-table-column
      prop="renewalDate"
      label="延期操作日期"
        align="center"
      min-width="130">
    </el-table-column>
    <el-table-column
      prop="newStartDate"
      min-width="130"
        align="center"
      label="有效期开始日期">
    </el-table-column>
    <el-table-column
      prop="newExpireDate"
      min-width="130"
        align="center"
      label="有效期结束日期">
    </el-table-column>
    <el-table-column
      prop="renewalFee"
      min-width="130"
        align="center"
      label="延期费用">
    </el-table-column>
    <el-table-column
      min-width="170"
      prop="remark"
        align="center"
      label="备注">
    </el-table-column>
    <el-table-column
      min-width="130"
        align="center"
      label="操作">
    <template slot-scope="scope">
      <el-button style="color:#6E92E9;" type="text" v-if="secondMitId == scope.row.id" size="mini" @click="addOrUpdateSecond(scope.row)">修改</el-button>
      <el-button type="text" style="color:#606266;" v-if="secondMitId !== scope.row.id" size="mini">-</el-button>
    </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
   </el-pagination>
    </div>
    </div>
    <el-dialog
    title="延期证书"
    :visible.sync="dialogPostPones"
    width="50%"
    >
   <span>
    <el-form :model="deeForm" ref="form" :rules="dataListRule" label-width="140px">
        <el-row>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期开始时间:" prop="newStartDate">
              <el-date-picker type="date" v-model="deeForm.newStartDate" placeholder="选择有效期开始时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期结束时间:" prop="newExpireDate">
              <el-date-picker type="date" v-model="deeForm.newExpireDate" placeholder="选择有效期结束时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
            <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期时间:" prop="renewalDate">
              <el-date-picker type="date" v-model="deeForm.renewalDate" placeholder="选择延期时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期费用:" prop="renewalFee">
                <el-input v-model="deeForm.renewalFee" oninput ="value=value.replace(/[^\d]/g,’’)"  placeholder="请填写延期费用"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input type="textarea" :rows="5" v-model="deeForm.remark" placeholder="请填写延期相关的情况说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
     </el-form>
   </span>
   <span slot="footer" class="dialog-footer">
    <el-button size="mini" class="button-see" plain @click="dialogPostPones = false">取 消</el-button>
    <el-button size="mini" class="button-see" type="primary" @click="clickPostPones()">确 定</el-button>
  </span>
   </el-dialog>
    </div>
   <subfolder-manual v-if="!modDetail" :img="img" :dataRow = dataForm @qualificationddd=qualificationddd></subfolder-manual>
  </div>
</template>
<script>
import Vue from 'vue'
// import EleImage from '/ele-image.vue'
// import EleImage from '@/components/ele-image/ele-image.vue'
import EleImage from '@/views/modules/certificate/certinfo/ele-image'
import merge from 'lodash/merge'
import SubfolderManual from './subfolder-manual'
import { Button } from 'element-ui'
export default {
  name:'SubfolderListDeteil',
  data () {
    return {
    modDetail:true,
    qualification:true,
    labelPosition:'right',
    dialogPostPones:false,
    dataForm:{
    },
    certiPicList:[],
    tableData:[],
    cellList:[],
    activeNames: [],
    img:[],
    secondData:[],
    // dataRow:{},
    secondMitId:'',
    yanqi:false,
    yanqiId:'',
    deeForm:{
    renewalDate:'',
    newStartDate:'',
    newExpireDate:'',
    remark:'',
    renewalFee:''
    },
    dataListRule: {
      renewalDate: [
        { required: true, message: '选择延期时间', trigger: 'blur' }
      ],
      newStartDate: [
        { required: true, message: '选择有效期开始时间', trigger: 'blur' }
      ],
      newExpireDate: [
        { required: true, message: '选择有效期结束时间', trigger: 'blur' }
      ],
      renewalFee: [
        { required: true, message: '请填写延期费用', trigger: 'blur' }
      ]
    },
    pageIndex: 1,
    pageSize: 5,
    totalPage: 0,
    };
  },
  props:{
    qualificationEdit:{
      type: Boolean,
    },
    rowId:{
      type: Number,
      required: true
    }
  },
  mounted() {
      // this.$nextTick(() => {
      //       // this.tableHeight = window.innerHeight - 267;
      //       //后面的50：根据需求空出的高度，自行调整
      //       // this.$refs.myWarning.offsetHeight
      //       this.$refs.modIs.offsetHeight = window.innerHeight
      //   })
    },
  created(){
    this.getDataList()
    this.getDataRenen()
    this.getCell()
  },
  components: {
      SubfolderManual, EleImage
  },
  methods:{
    getCell(){
        this.$http({
          url: this.$http.adornUrl('/sys/quali/matchCond/'+this.rowId),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
             this.cellList = data.data
         }
        })
    },
    // /sys/quali/matchCond/{certId}
    getDataList(){
      this.$http({
          url: this.$http.adornUrl('/cert/entQuali/getDetail/'+this.rowId),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
            this.dataForm = data.data
            this.dataRow = data.data
            this.certiPicList.push({
            path: data.data.certiPic
            })
            this.img.push({
            url: data.data.certiPic
            })
            // console.log(this.certiPicList);
         }
        })
    },
    postImg(){
      this.img = []
      this.img.length = 0
      },
    qualificationddd(){
    this.modDetail = true
    },
    getDataRenen(){
      this.$http({
          url: this.$http.adornUrl('/cert/entQualiRenewal/paging/'),
          method: 'post',
          data: this.$http.adornData({
            'pageNum': this.pageIndex,
            'pageSize': this.pageSize,
            'certificateId':this.rowId
          })
        }).then(({data}) => {
           if(data.code === 0){
            this.secondData = data.data.records
            this.secondMitId = data.data.records[0].id
            this.totalPage = data.data.total
         }
        })
    },
    addOrUpdateSecond(row){
    this.dialogPostPones = true
    this.deeForm = row
    this.yanqi = true
    this.yanqiId = row.id
    },
    clickPostPones(){
      if(!this.yanqi){
      this.$refs.form.validate(valid=>{
      if(valid){
      this.$http({
              url: this.$http.adornUrl('/cert/entQualiRenewal/save'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.rowId,
                'renewalDate': this.$dateFormat(this.deeForm.renewalDate),
                'newStartDate': this.$dateFormat(this.deeForm.newStartDate),
                'newExpireDate': this.$dateFormat(this.deeForm.newExpireDate),
                'remark': this.deeForm.remark,
                'renewalFee': this.deeForm.renewalFee
              })
            }).then(({data})=>{
              // console.log(data);
              if (data.code === 0) {
              this.$message.success("延期成功")
              this.dialogPostPones = false
              this.getDataRenen()
              // this.initJobs()
              // this.renewalInfo()
              }else{
              this.$message.error("延期失败")
              }
            })
      }
      })
      }else{
      this.$refs.form.validate(valid=>{
      if(valid){
      this.$http({
              url: this.$http.adornUrl('/cert/entQualiRenewal/update'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.yanqiId,
                'renewalDate': this.$dateFormat(this.deeForm.renewalDate),
                'newStartDate': this.$dateFormat(this.deeForm.newStartDate),
                'newExpireDate': this.$dateFormat(this.deeForm.newExpireDate),
                'remark': this.deeForm.remark,
                'renewalFee': this.deeForm.renewalFee
              })
            }).then(({data})=>{
              // console.log(data);
              if (data.code === 0) {
              this.$message.success("更新成功")
              this.dialogPostPones = false
              this.getDataRenen()
              // this.initJobs()
              // this.renewalInfo()
              }else{
              this.$message.error("更新失败")
              }
            })
      }
      })
      }
      },
    itemDetails(){
      this.dialogPostPones = true
    },
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
        this.initRecord()
    },
  currentChangeHandle (val) {
      this.pageIndex = val
      this.initRecord()
    },
    toggleEdit(){
      this.modDetail = false
    },
    gotoRouteHandle(){
      // console.log(2);
      this.$parent.clickgoto()
    }
  }
  }

</script>
<style scoped lang="scss">
/deep/.el-collapse{
  border: 0px !important;
  .el-collapse-item{
    margin-bottom: 16px !important;
  .el-collapse-item__wrap{
  border: 1px solid #EBEEF5 !important;
  padding: 16px !important;
  .el-collapse-item__content{
    padding-bottom: 0px !important;
  }
  }
.el-collapse-item__header{
  border-top: 1px solid #EBEEF5 !important;
  border-left: 1px solid #EBEEF5 !important;
  border-right: 1px solid #EBEEF5 !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}
  }
}

.mod-detail{
  padding: 15px !important;
  background-color: #F5F7FA;
}
.outline-a{
  font-size: 16px;
  margin-left: 8px;
}
.anniu{
      height: 56px;
      font-size: 14px;
      float: right;
      display: flex;
      align-items: center;
      .button-xg{
        float: right;
      }
      span{
      float: right;
      // margin-right: 20px;
      }
    }
.zizhi{
  width: 100%;
  height: 40px;
  .yanqijilu{
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .yanqianniu{
    float: right;
    height: 40px;
    display: flex;
    align-items: center;
    .button-a{
      font-size: 14px;
    }
  }
}
.div-table{
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
.form-div{
    margin-left: 10px;
  }
.queryFormList{
  .el-form-item {
    margin-bottom: 0px !important;
}
}
.mod-isisis{
  padding-right: 15px !important;
  padding-left: 15px !important;
  background-color: #ffffff;
}
.in-t{
  float: left;
  height: 56px;
  display: flex;
  align-items: center;
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
/deep/.el-pagination{
  padding-bottom: 15px !important;
}
  .hander-s{
    width: 100%;
    height: 56px;
    color: #303133;
    overflow: hidden;
    h3{
      float: left;
      font-size: 16px;
      margin: 0px !important;
      padding: 0px !important;
    }
    font-size: 14px;
    font-weight: 400;
    i{
      color: #F2F6FC;
      margin-left: 5px;
      margin-right: 5px;
    }
  }
  .div-forDiv{
    width: 100%;
    overflow: hidden;
  }
  .div-xh{
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .div-title{
    width: 100%;
    height: 52px;
    border: 1px solid #EBEEF5;
  }
  .title-text{
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #262626;
    float: left;
  }
</style>